<!DOCTYPE html>
<html lang="en">
    <head>
        <title> search box </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel ="stylesheet" href ="{{url_for('static',filename ='search_style.css')}}"/>
    </head>
    <script>
        var obj = {"name":"linxinfa", "blog":"https://blog.csdn.net/linxinfa"};
// 将字典对象转为json字符串
var json_str = JSON.stringify(obj);
document.write("json str: " + json_str);

// 格式化json字符串
document.write( "<br>" );
document.write( "<br>" );
document.write( "格式化json字符串:" );
var json_str2 = JSON.stringify(obj, null, 4) //使用四个空格缩进
document.write("<pre>" + json_str2 + "</pre>" );

// 将json字符串转为为字典对象
var json_obj = JSON.parse(json_str2);
document.write("my blog: " + json_obj.blog);
    </script>
    <body>
         <div class="container">

            <form method="post" action="/" class="parent">

                <input name="query" type="text">

                <input type="submit" value="获取推荐服务">

            </form>

        </div>
    {% if result %}
         {% for data in result %}
             <div class="posts">
                <div class="post clearfix">
                    <div class="post-title">
                        <div class="post-title-text">
                                {{data["name"]}}
                        </div>
                        <div class="post-info clearfix">
                            <div class="post-info-text">
                                <!--{{data["description"]}}-->
                                {{JSON.stringify(data)}}
                            </div>
                            <span class="reply-count">{{data["status"]}} </span>
                        </div>
                    </div>
                </div>
             </div>
         {% endfor %}
    {% endif %}
    </body>
</html>


<div id="content" class="clearfix">
            <div id="content-left">
                <div id="nav">
                    <ul class="clearfix">
                        <li><a href="#" class="current-active">技术</a></li>
                        <li><a href="#">创意</a></li>
                        <li><a href="#">好玩</a></li>
                        <li><a href="#">Apple</a></li>
                        <li><a href="#">社区</a></li>
                        <li><a href="#">生活</a></li>
                        <li><a href="#">电影</a></li>
                        <li><a href="#">问答</a></li>
                    </ul>
                </div>
                <div id="posts">
                    <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="image/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    如何优雅的吃螃蟹?
                            </div>
                            <div id="post-info" class="clearfix">
                                <div id="post-info-text">
                                    Android  ⚝  vivo  ⚝ 2 分钟前  ⚝  最后回复来自 ID2333
                                </div>
                                <span id="reply-count">120</span>
                            </div>
                        </div>
                    </div>
                    <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="image/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    任正非：华为对向苹果等出售5G芯片持开放态度.
                            </div>
                            <div id="post-info" class="clearfix">
                                <div id="post-info-text">
                                    Android  ⚝  oppo  ⚝ 2 分钟前  ⚝  最后回复来自 ID7313
                                </div>
                                <span id="reply-count">980</span>
                            </div>
                        </div>
                    </div>
                    <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="image/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    How to defeat Ma Yun?
                            </div>
                            <div id="post-info" class="clearfix">
                                <div id="post-info-text">
                                    Apple  ⚝  S9  ⚝ 12 分钟前  ⚝  最后回复来自 ID99655
                                </div>
                                <span id="reply-count">170</span>
                            </div>
                        </div>
                    </div>
                    <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="image/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    What is the Earth like in the next 100 years?
                            </div>
                            <div id="post-info" class="clearfix">
                                <div id="post-info-text">
                                    Android  ⚝  HuaWei-P30  ⚝ 20 分钟前  ⚝  最后回复来自 ID9383
                                </div>
                                <span id="reply-count">520</span>
                            </div>
                        </div>
                    </div>
                    <div id="post" class="clearfix">
                        <div id="post-head">
                            <img src="image/head.png" alt="headjpg">
                        </div>
                        <div id="post-title">
                            <div id="post-title-text">
                                    Welcome to Mars!A detailed introduction to Mars.
                            </div>
                            <div id="post-info" class="clearfix">
                                <div id="post-info-text">
                                    Android  ⚝  xiaomi  ⚝ 2 分钟前  ⚝  最后回复来自 ID1874
                                </div>
                                <span id="reply-count">320</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="content-right">
                <div id="hot-posts">
                    <div id="hot-module-title">
                        今日热议主题
                    </div>
                    <div id="hot-post" class="clearfix">
                        <div id="hot-post-head">
                            <img src="image/head.png" alt="">
                        </div>
                        <div id="hot-post-title">
                                What's the weight of Mars?
                        </div>
                    </div>
                    <div id="hot-post" class="clearfix">
                        <div id="hot-post-head">
                            <img src="image/head.png" alt="">
                        </div>
                        <div id="hot-post-title">
                                When is Mars suitable for human habitation?
                        </div>
                    </div>
                    <div id="hot-post" class="clearfix">
                        <div id="hot-post-head">
                            <img src="image/head.png" alt="">
                        </div>
                        <div id="hot-post-title">
                            是时候展现真正的技术了!
                        </div>
                    </div>
                </div>
                <div id="running-status">
                    <div id="running-module-title">
                        社区运行状况
                    </div>
                    <div id="statistic">
                        <div id="statistic-item" class="clearfix">
                            <div id="statistic-name">
                                注册会员
                            </div>
                            <div id="statistic-value">
                                255
                            </div>
                        </div>
                        <div id="statistic-item" class="clearfix">
                            <div id="statistic-name">
                                主题
                            </div>
                            <div id="statistic-value">
                                1234562
                            </div>
                        </div>
                        <div id="statistic-item" class="clearfix">
                            <div id="statistic-name">
                                回复
                            </div>
                            <div id="statistic-value">
                                789
                            </div>
                        </div>
                    </div>
                    <div id="scoreboard">
                        <div id="fortune">♕财富排行榜</div>
                        <div id="consumption">♔消费排行榜</div>
                    </div>
                </div>
            </div>
    </div>